<template>
  <n-grid :x-gap="12" :y-gap="12" :cols="4">
    <n-gi :span="3">
      <n-card :bordered="false" title="今日数据" content-style="padding: 0 12px 12px 12px !important;">
        <n-grid :x-gap="12" :y-gap="12" :cols="4">
          <n-gi>
            <n-alert :show-icon="false">
              Gee it's good to be back home
            </n-alert>
          </n-gi>
          <n-gi>
            <n-alert :show-icon="false">
              Gee it's good to be back home
            </n-alert>
          </n-gi>
          <n-gi>
            <n-alert :show-icon="false">
              Gee it's good to be back home
            </n-alert>
          </n-gi>
          <n-gi>
            <n-alert :show-icon="false">
              Gee it's good to be back home
            </n-alert>
          </n-gi>
        </n-grid>
      </n-card>
      <n-grid :x-gap="12" :y-gap="12" :cols="12" class="m-t-10">
        <n-gi :span="5">
          <n-card :bordered="false" title="首付款统计" content-style="padding: 0 12px 12px 12px !important;"></n-card>
        </n-gi>
        <n-gi :span="7">
          <n-card :bordered="false" title="销售趋势分析" content-style="padding: 0 12px 12px 12px !important;"></n-card>
        </n-gi>
      </n-grid>
      <n-grid :x-gap="12" :y-gap="12" :cols="12" class="m-t-10">
        <n-gi :span="8">
          <n-card :bordered="false" title="销售订单" content-style="padding: 0 12px 12px 12px !important;">
            <n-data-table
                :columns="columns"
                :data="order_data"
                :bordered="false"
                size="small"
            />
          </n-card>
        </n-gi>
        <n-gi :span="4">
          <n-card :bordered="false" title="商品销售排行" content-style="padding: 0 12px 12px 12px !important;">

          </n-card>
        </n-gi>
      </n-grid>
    </n-gi>
    <n-gi>
      <n-card :bordered="false">
        <div style="display: flex">
          <div class="avtar">
            <n-avatar v-if="userStore.avatar"
                      round
                      :size="52"
                      :src="'/api/file/'+userStore.avatar"
            />
            <n-avatar v-else :style="avatarStyle" round :size="52">
              <span style="font-size: 22px;"> {{ userStore.nickName.charAt(0) }}</span>
            </n-avatar>
          </div>
          <div class="names" style="padding-left: 10px;">
            <h3 style="margin-block-start: 0.33em;margin-block-end:0;">
              欢迎您！{{ userStore.userName }}({{ userStore.nickName }})</h3>
            <p style="margin-block-start: 0.13em;margin-block-end:0.33em;">上次登录时间：{{ last_login }}</p>
            <p style="margin-block-start: 0.13em;margin-block-end:0.33em;">上次登录IP：{{ last_ip }}</p>
          </div>
        </div>
        <div class="now_date m-t-10" style="display: flex;justify-content: center">
          <n-date-picker :default-value="new Date().getTime()" panel type="date" :actions="null" size="large" bind-calendar-months/>
        </div>
      </n-card>
      <n-card :bordered="false" title="待办事项" class="m-t-10"
              content-style="padding: 0 12px 12px 12px !important;"></n-card>
      <n-card :bordered="false" title="快捷入口" class="m-t-10"
              content-style="padding: 0 12px 12px 12px !important;"></n-card>
    </n-gi>
  </n-grid>
</template>
<script lang="ts" setup>
import {onBeforeMount, ref} from 'vue';
import {UseUserStore} from '@/stores/user.ts';
//import {getLocalStorage} from '@/util'
import {ThemesColor} from '@/config'
//import * as echarts from 'echarts';
const userStore = UseUserStore();
//头像样式
const avatarStyle = ref({
  color: "white",
  backgroundColor: ThemesColor.appTheme
});

const columns = ref([
  {
    title: '订单号',
    key: 'order_num'
  },
  {
    title: '客户名称',
    key: 'user_name'
  }, {
    title: '下单时间',
    key: 'create_time',
    width: 170
  }, {
    title: '订单金额(元)',
    key: 'order_total',
    width: 100,
    align: 'center'
  }
]);
const order_data = ref([
  {
    order_num: 'CA000000-20231105160845',
    user_name: '北京XXXX',
    create_time: '2023/11/05 16:08:45',
    order_total: '240.50'
  },
  {
    order_num: 'CA000000-20231105160845',
    user_name: '北京XXXX',
    create_time: '2023/11/05 16:08:45',
    order_total: '240.50'
  },
  {
    order_num: 'CA000000-20231105160845',
    user_name: '北京XXXX',
    create_time: '2023/11/05 16:08:45',
    order_total: '240.50'
  },
  {
    order_num: 'CA000000-20231105160845',
    user_name: '北京XXXX',
    create_time: '2023/11/05 16:08:45',
    order_total: '240.50'
  },
  {
    order_num: 'CA000000-20231105160845',
    user_name: '北京XXXX',
    create_time: '2023/11/05 16:08:45',
    order_total: '240.50'
  }
])
// const today = ref(new Date())
const last_login = ref<string>('');
const last_ip = ref<string>('');
onBeforeMount(() => {
  getLastLogin();
})
const getLastLogin = () => {
  // const last = getLocalStorage('last_login');
  // let date = new Date(parseInt(last.time) * 1000);
  // let Year = date.getFullYear();
  // let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
  // let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
  // let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
  // let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
  // let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
  // last_login.value = Year + '.' + Moth + '.' + Day + ' ' + Hour + ':' + Minute+':'+Sechond;
  // last_ip.value = last.ip;
}
</script>

<style scoped lang="">

</style>